<template>
	
	<view style="background-color: #151515!important; width: 100%; height: 100vh;"> 
		<u-popup :show="successWay" mode="center"  bgColor="transparent">
			<view class="dialogBox shareBox" id='shareBox' > 
				<view class="headerTop"> 
					<view class="close"  @click.stop="closePage"> 
						<image src="/static/images/iconClose.png" class="btnClose"></image>
					</view>
				</view>  
				<view  v-if="posterImage" style="width: 100%; text-align: center;">
					<image :src="posterImage" @load="loadFinish" :style="{width:'720rpx',height: '972rpx',margin:'0 auto'}"></image>
				</view>
				<view class="poster-canvas" v-else>
					<canvas  canvas-id="canvas" id="canvas"  :style="{width:'720rpx',height: '972rpx',margin:'0 auto'}"></canvas>
				</view>
			 
				<view class="shareBtn flex"  @click="savePic">
					<text class="sure sure1" style="padding: 20rpx 0;">转发给好友/群</text>
					<text class="sure" style="padding: 20rpx 0;">保存分享海报</text>
					<text class="sure sure2" style="padding: 20rpx 0;">复制推广链接</text>
				</view> 
				
				
				
				
			</view> 
		</u-popup>
		
	</view> 
	
</template>

<script > 
import { getHash } from '@/api/hash';
	export default {
		data() {
			return {
				successWay : true, 
				posterImage:'',
				canvas:'',
				canvasMultiple: 2,
				id : 0,
				hash : {}
			};
		},
		onLoad(options) {
			this.id = options.id;
			this.init();
			
			
		},
		methods: {
			loadFinish(){
				uni.hideLoading();
			},
			init(){
				uni.showLoading({
					title:'正在生成'
				})
				getHash(this.id).then(res =>{
					this.successWay = true;
					this.hash = res.data;
					this.posterImage = res.data.poster;
					//this.creatCanvas();
				}).catch( e=>{
					uni.$u.toast(e);
				})
			},
			closePage(){
				this.successWay = false;
				uni.navigateBack({
					delta:1
				})
				// 返回页面
			},
			savePic(){
				this.savePosterPath() 
			}, 
			// #ifdef MP
			savePosterPath: function () {
				let that = this;
				uni.getSetting({
					success(res) {
						console.log(res);
						if (!res.authSetting['scope.writePhotosAlbum']) {
							console.log(';cda');
							uni.authorize({
								scope: 'scope.writePhotosAlbum',
								success() {
									uni.saveImageToPhotosAlbum({
										filePath: that.posterImage,
										success: function (res) {
											uni.showLoading({
												 title:'保存成功！'
											}) 
											// 返回页面
											uni.hideLoading();
										},
										fail: function (res) {
											uni.showLoading({
												 title:'保存失败！'
											}) 
											uni.hideLoading();
										}
									});
								}
							});
						} else {
							uni.showLoading({
								title:'正在保存'
							})
							uni.downloadFile({
									url: that.posterImage, // 图片地址
									success: (downloadResult) => {
										if (downloadResult.statusCode === 200) {
											// 下载成功，保存到本地文件系统
											uni.saveImageToPhotosAlbum({
												filePath: downloadResult.tempFilePath,
												success: function (res) {
													uni.showToast({
														title:'保存成功'
													})
													
													// 返回页面
													uni.hideLoading();
												},
												fail: function (res) {
													uni.showLoading({
														 title:'保存失败！'
													}) 
													uni.hideLoading();
												}
											});
										} else {
											console.error('下载失败');
										}
									},
									fail: (error) => {
										console.error('下载失败', error);
									}
								});
							
						}
					},
					fail: (res) => {
						console.log(res);
					}
				});
			},
			// #endif 
			 splitStringIntoChunks(str, chunkSize) {
			 	return str.match(new RegExp('.{1,' + chunkSize + '}', 'g'));
			 }
		}
	}
	// 
</script>

<style lang="scss"  scoped>
	.dialogBox{
		min-height: 300rpx;
		margin:0 40rpx;  
		position: relative;
		.saveHasMaske{
			position: absolute;
			background-color: rgb(170, 0, 0);
			left: -30rpx;
			top:15rpx;
			width:440rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			font-size: 30rpx; 
			color: #FFF; 
			transform: rotate(-15deg); 
		}
		.headerTop{
			position: absolute;
			top:20px;
			right: 0%;
			// width: 95%;
			z-index: 9999; 
			text-align: right;
			.saveHasMaske{
				left: -40rpx;
				top:5rpx;
			}
		}
		
		.logoh{
			width: 213rpx;
			height: 168rpx;
			margin: 0 auto;
			display: block;
			padding-bottom: 30rpx;
		}
		.dialogBoxCon{
			// background: url(@/assets/dialogBg.png);
			background-size: 100% 100%;
			padding: 50rpx 50rpx 50rpx 50rpx; 
			position: relative;
			.til_code{
				width: 100%;
				height: 80rpx;
				background-color: #000;
				color:#fff;
				line-height: 80rpx;
				font-size: 46rpx;
				text-align: center;
				
			}
			.info1,.info2{
				padding: 30rpx 0;
				border-bottom: 1px solid #000;
				margin-bottom: 30rpx;
				line-height: 50rpx;
				font-size: 30rpx;
				// font-weight: bold;
				color: #000;
				position: relative;
			}
			.codeImg{
				position: absolute;
				right:20rpx;
				top:40rpx;				
				image{
					width: 120rpx;
					height: 120rpx;
				}
			}
			.info2{
				font-size: 24rpx;
				line-height: 46rpx;
				padding: 0rpx 0 20rpx 0;
				border-bottom: none;
			}
			.info2 h2{
				text-align: center;
			}
			.haxi3{
				// background: url(../../assets/dialog_bt.png) no-repeat;
				background-size: 100% 86rpx;
				color: #fff;
				font-size: 36rpx;
				line-height: 86rpx;
				text-align: center;
				font-weight: bold;
			} 
			 
		}
		.close{
			text-align: right;
			position: absolute;
			right:40rpx;
			top:30rpx;
			.btnClose{
				width: 47rpx;
				height: 47rpx;
				margin-right: -20rpx;
			}
		}
	
	}
	
	.rgClose{
		position: absolute;
		right: 30rpx;
		top:30rpx;
	}
	
	.codeBox{
		position: relative;
		.reload{
			position: absolute;
			right: -100rpx;
			top:0rpx;
		}
	}
 
	
	
	.shareBox{
		margin: 0 auto; 
		width: 720rpx; 
		.headerTop{
			position: relative;
			.close{
				position: absolute;
				top:-15rpx;
				right:60rpx;
			}
		}
		.shareBtn{
			width: 100%; 
			text-align: center;
			border-radius: 10rpx;
			margin-top: 20rpx;
			.sure{
				height: 40rpx;
				line-height: 40rpx;
				color: #fff;
				background-color: #37383c; 
				width: 31.3%; 
			}
			.sure1{
				border-radius: 10rpx 0 0 10rpx; 
				margin-right:2%;
			}
			.sure2{ 
				margin-left:2%;
				border-radius: 0rpx 10rpx 10rpx 0rpx;
			} 
		}
	}
	.poster-canvas{ 
		// display: flex;
		// justify-content: center; /* 水平居中 */
		// align-items: center; /* 垂直居中 */
		// height: 100vh; /* 使用视口高度 */ 
		margin: 0 auto; 
		position: relative; 
		width: 750rpx;
		#canvas{
		  width: 750rpx; 
		  // position: absolute;
		  // left:calc(50% - 375rpx);
		  // top:200rpx; 
		}
	}
	
</style>